<template>
  <div class="">
    <user-check-box
      v-model="queryParams.userIds"
      @change="changeOption" :filter-stop="true"
      @apiUserFinish="changeOption"
      :disdisabled="loading"
      class="mgt10"
    ></user-check-box>
    <div class="content">
      <div class="header-search" >
        <div class="left" >
          <el-select v-model="queryParams.warehouseId" placeholder="请选择" @change="getData" v-if="false">
            <el-option :value="0" label="全部仓库"></el-option>
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.id">
            </el-option>
          </el-select>

        </div>
        <div class="right">
          <el-input
            size="small"
            style="width: 280px; margin-right: 10px; margin-bottom: 10px"
            v-model="queryParams.keyword"
            placeholder="搜索计划单号/货件单号"
            @keyup.enter.native="changeOption"
            clearable @clear="changeOption"></el-input>
          <el-button size="small" type="primary" @click="changeOption">{{ $t('common.search') }}</el-button>
        </div>
      </div>
      <el-tabs v-model="queryParams.status" @tab-click="changeOption">
        <el-tab-pane :label="`待发货(${statusNum.ready2Ship})`" name="ready_to_ship"></el-tab-pane>
        <el-tab-pane :label="`已发货(${statusNum.shipped})`" name="shipped"></el-tab-pane>
        <el-tab-pane :label="`已完成(${statusNum.finished})`" name="finished"></el-tab-pane>
        <el-tab-pane :label="`全部(${statusNum.total})`" name="total"></el-tab-pane>
      </el-tabs>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
      >
        <el-table-column
          prop="shippingPlanNo"
          label="计划单号"
          align="center"
          min-width="150"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="userAccount"
          label="用户"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="planName"
          label="计划名称"
          align="center"
          min-width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="warehouseName"
          label="收货仓库"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="moveWarehouseType"
          label="移仓类型"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getMWTypeStr(row.moveWarehouseType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="containerNo"
          label="货柜号"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{row.containerNo || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="haveLogisticsNo"
          label="物流单号"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{row.haveLogisticsNo ? '有物流单号' : '无物流单号'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="shipmentList"
          label="货件单"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            <template v-if="!row.shipmentList">
              -
            </template>
            <template v-else-if="row.shipmentList.length === 1">
              {{row.shipmentList[0].shipmentNo}}
            </template>
            <template v-else>
              <el-tooltip class="item" effect="dark" placement="top">
               <div slot="content">
                 <div
                   v-for="item in row.shipmentList"
                   :key="item.id"
                 >
                   {{item.shipmentNo}}
                 </div>
               </div>
                <div>
                  {{row.shipmentList.length}}个货件单
                </div>
              </el-tooltip>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="boxNum"
          label="箱子数量"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="skuNum"
          label="SKU种数"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="goodsNum"
          label="商品数量"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="sumFee"
          label="费用（元）"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="制单时间"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getPlanStatusStr(row.status)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="op"
          label="操作"
          min-width="200"
          fixed="right"
        >
          <template v-slot="{row}">
            <el-button type="view" @click="jumpInfo(row)">查看</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="page-wrap">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
          :page-sizes="[10, 20, 50, 100,]"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMWTypeStr,
  getPlanStatusStr,
  PLAN_TYPE_FL,
  PLAN_TYPE_MW,
  planTypeList
} from "@/utils/shippingPlan";
import {getShippingPlanList} from "@/api/shippingPlan";
import shipmentList from "@/views/shipment/shipmentList.vue";
import {deepCopy} from "@/utils";
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";

export default {
  name: 'shippingPlanList2',
  components: {UserCheckBox,},
  computed: {
    shipmentList() {
      return shipmentList
    }
  },
  mixins: [shippingPlanDataMixin],
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        warehouseId: 0,
        transferType: '',
        keyword: '',
        status: 'total',
        type: PLAN_TYPE_MW,
        userIds: [],
      },
      loading: false,
      total: 0,
      planTypeList,
      statusNum: {
        saved: 0,
        ready2Ship: 0,
        shipped: 0,
        finished: 0,
        total: 0,
      },
      tableData: [],
    }
  },
  created() {
    // this.getData()
  },
  methods: {
    getMWTypeStr,
    getPlanStatusStr,
    getData(){
      this.loading = true
      getShippingPlanList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.statusNum = deepCopy(res.info.statusNum)
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.PageSize = val;
      this.queryParams.page = 1
      this.getData();
    },
    jumpInfo(row){
      this.$router.push({
        name: 'shippingPlanInfo',
        query: {
          id: row.id
        }
      })
    }
  },
}

</script>

<style scoped lang="scss">
.wrap{
  .content{
    .type-search{
      padding-bottom: 10px;
      border-bottom: 1px solid #DFE6ED;
    }
    .header-search{
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>
